<template>
  <view>
    <my-search @on-click="onClickHandler"></my-search>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{ height: wh + 'px' }">
        <!-- 一级分类数据 -->
        <view @click="changeCate(item1.cat_id)" class="left-scroll-view-item" :class="{ active: cat_id === item1.cat_id }" v-for="item1 in cateList" :key="item1.cat_id">
          {{ item1.cat_name }}
        </view>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view class="right-scroll-view" scroll-y :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
        <!-- 二、三级分类数据 -->
        <view class="cate-lv2" v-for="item2 in secondCateList" :key="item2.cat_id">
          <!-- 二级分类 -->
          <view class="cate-lv2-title">/ {{ item2.cat_name }} /</view>
          <!-- 三级分类 -->
          <view class="cate-lv3-list" v-if="item2.children && item2.children.length">
            <!-- 三级分类 Item 项 -->
            <view class="cate-lv3-item" v-for="item3 in item2.children" :key="item3.cat_id" @click="goToGoodsList(item3.cat_id)">
              <!-- 图片 -->
              <image :src="item3.cat_icon"></image>
              <!-- 文本 -->
              <text>{{ item3.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getCateListApi } from '../../api/cate.js';
import badgeMixin from '../../mixins/tabbar-badge.js';
export default {
  mixins: [badgeMixin],
  data() {
    return {
      // 滑块组件的高度
      wh: 0,
      // 分类列表数据
      cateList: [],
      // 激活的一级分类id
      cat_id: 1,
      // 设置右侧滑块滚动条的滚动位置
      scrollTop: 0
    };
  },
  computed: {
    // 二级分类是根据分类列表数据和激活的分类id来计算得到
    secondCateList() {
      const item = this.cateList.find((item) => item.cat_id === this.cat_id);
      if (item) {
        return item.children;
      } else {
        return [];
      }
    }
  },
  onLoad() {
    // 滑块的高度=窗口的高度-navbar的高度-tabbar的高度- 自定义的search组件高度
    // 获取当前系统的信息
    const sysInfo = uni.getSystemInfoSync();
    // 为 wh 窗口可用高度动态赋值
    this.wh = sysInfo.windowHeight - 50;
    // 获取分类列表数据
    this.getCateList();
  },
  methods: {
    // 分类列表数据
    async getCateList() {
      const res = await getCateListApi();
      this.cateList = res.filter((item) => item.cat_id !== 356);
    },
    // 改变一级分类
    changeCate(cat_id) {
      this.cat_id = cat_id;
      // 让 scrollTop 的值在 0 与 1 之间切换,因为只有值的改变才会触发滚动条的滚动事件
      this.scrollTop = this.scrollTop === 0 ? 1 : 0;
    },
    // 点击三级分类去往商品列表页
    goToGoodsList(cat_id) {
      uni.navigateTo({
        url: `/subpkg/goods_list/goods_list?cid=${cat_id}`
      });
    },
    onClickHandler() {
      uni.navigateTo({
        url: '/subpkg/search/search'
      });
    }
  }
};
</script>

<style lang="scss">
.scroll-view-container {
  display: flex;
  // 左侧滑块
  .left-scroll-view {
    width: 120px;
    // 左侧一级分类
    .left-scroll-view-item {
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;

        // 渲染激活项左侧的红色指示边线
        &::before {
          content: ' ';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  // 右侧滑块
  .right-scroll-view {
    // 二级分类
    .cate-lv2-title {
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 15px 0;
    }
    // 三级分类
    .cate-lv3-list {
      display: flex;
      flex-wrap: wrap;
      .cate-lv3-item {
        width: 33.33%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          width: 60px;
          height: 60px;
        }
        text {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
